<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<title>搜索页</title>
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/list.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/footer.css"/>
		<style type="text/css">
		.shouye{
				background-position: 0px -28px;
			}
			header{
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 10;
			}
		 #search{
				width: 100%;
				height: 50px;
				line-height: 50px;
				background: #efefef;
				
			}
			#int{
				width: calc(100% - 70px);
				margin-left: 10px;
				height: 40px;
				border-radius:50px ;
				font-size: 16px;
				color: #5C5C67;
				border: none;
				text-indent: 50px;
				position: relative;
			}
			input{outline:medium;}
			.mui-input-row {
				top: 12px;
				right: 60px;
				font-size: 28px;
			}
			body,.caini{
				background: #FFFFFF;
			}
			.search_text{
				display: inline-block;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #bcbcbc;
				font-size:18px;
			}
			.search_logo{
				display: inline-block;
				width: 40px;
				height: 40px;
				background: url(${BASE_PATH}/static/app/img/search.png) no-repeat 0 2px;
				background-size:90% ;
				position: absolute;
				top: 9px;
				left: 20px;
				z-index: 1;
			}
			.back{
				width: 15px;
			    height: 33px;
			    display: inline-block;
			    background: url(${BASE_PATH}/static/app/img/back.png) no-repeat;
			    background-size: 80%;
			    margin-left: 5%;
			    margin-top: 9px;
			    float: left;
			}
			.nin{
				margin-top: 55px;
				margin-bottom: -5px;
			}
			img{border:0;vertical-align: middle;}
			dt{width: 32%;}
			dd{width: 64%;float: right;margin-top: -110px;}
			.app-item-title{
				display: inline-block;
				height: 60px;
				float: right;
				font-size: 16px;
				 color: #5C5C67; 
				line-height: 17px;
			}
			.app-price{
				padding-top: 70px;
			}
			.men_prices{
				position: relative;
				float: left;
			}
			.alines{
				display: inline-block;
				width: 110%;
				height: 1px;
				background: #f52f59;
				position: absolute;
				left: -5px;
				top: 50%;
				margin-top: -1px;
			}
			.sjf{width: 100%;float: left;color: #F797B7;}
			.men_jians{
				float: right;
			}
			.aaa{
			 margin-top:5px;
			 border-bottom: 1px solid #fafafa;
			}
			.men{
			    display: inline-block;
			    width: 100%;
			    height: 50%;
			    color: #787878;
			    font-size: 12px;
			}
		</style>
	</head>
	<body class="app-navbar-body">
	    <!-- 精品推荐 -->
	    <div class="app-part app-part-flow">
	    	<header>
				<div class="mui-input-row" id="search">
					<span class="search_logo"></span>
					<input id="int" type="text" class="mui-input-clear" required placeholder="请输入关键字搜索商品">
					<span class="search_text" onclick="search();">搜索</span>
				</div>
			</header>
			<div id="recomGoodsList" class="am-g app-goods-list nin"></div>
	    </div>
	 
		<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
			<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
		</div>
				
		 <footer>
			<ul>
				<a href="${BASE_PATH}/index"><li ><i class="shouye"></i>首页</li></a>
				<a href="${BASE_PATH}/goods/youxuan"><li><i class="fenlei"></i>妈咪说</li></a>
				<a href=" https://h5.youzan.com/v2/showcase/homepage?alias=1fo6ae813&sf=wx_menu"><li><i class="youxuan"></i>商城</li></a>
				<a href="${BASE_PATH}/order/list"><li><i class="dingdan"></i>订单</li></a>
				<a href="${BASE_PATH}/my"><li><i class="my"></i>我的</li></a>
			</ul>
		</footer>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<!-- tpl -->
		<script type="text/html" id="dataTpl">
			{{each list as goods}}
			<div class="am-u-md-4 am-u-lg-3 app-goods-item aaa">
            	 <dl onclick="detail({{goods.id}});">
            		<dt><img data-original="${FTP_PATH}{{goods.thumb}}" class="lazyload" width="100%" onerror="src='${BASE_PATH}/static/app/img/model.png';"></dt>
					<dd class="app-item-title">{{goods.name}}</dd>
            		<dd class="app-price">
            			{{if goods.type==1}}
						<span class="sjf">¥{{goods.sellPrice}}</span>
						{{else if goods.type==2}}
						<span class="sjf">{{if goods.paytype==1}}商品积分{{else if goods.paytype==2}}健康积分{{else if goods.paytype==3}}教育积分{{/if}} {{goods.sellpoint}}</span>
						{{else if goods.type==3}}
						<span class="sjf">{{if goods.paytype==1}}商品积分{{else if goods.paytype==2}}健康积分{{else if goods.paytype==3}}教育积分{{/if}} {{goods.sellpoint}} + ¥{{goods.sellPrice}}</span>
						{{/if}}
						<span class="men"><span class="men_prices"><a class="alines"></a>门市价:¥{{goods.marketPrice}}</span><span class="men_jians">已售{{goods.num}}件</span></span>
            		</dd>
					
            	</dl>
            </div>
			{{/each}}
		</script>

		<script type="text/javascript">
		var loading = false ,pageNum = 0, totalPage = 1;
		var keyword="${keyword}";
			//加载标识，表示当前是否有请求未完成，防止同时多个请求
			var loading = false;
			$(function(){
				//绑定“加载中”进入加载事件
				Kit.util.onPageEnd(function(){
	               	if(pageNum < totalPage && !loading){
	               		loading = true;
	               		$("#recomGoodsList").append("<div class=\"app-loading\">正在加载</div>");
	                	Kit.ajax.post("${BASE_PATH}/goods/serchList",{pageNum:pageNum+1,pageSize:5,keyword:keyword},function(result){
							$("#recomGoodsList").append(template("dataTpl",result.object));
							//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
							$(".app-goods-item","#recomGoodsList").removeClass("am-u-end").last().addClass("am-u-end");
							//图片延迟加载
							$("img.lazyload","#recomGoodsList").not(".lazyload-binded").lazyload({
								failurelimit : 100,
								effect : "show"
							}).addClass("lazyload-binded");
							$(".app-loading","#recomGoodsList").remove();
							pageNum = result.object.pageNumber;
							totalPage = result.object.totalPage;
							//重置加载标识
							loading = false;
						});
	               	}
				});
			});
			function detail(id){
				window.location.href="${BASE_PATH}/goods/jfdetail/"+id;
			}
			function search(){
				var keyword=$("#int").val();
				if(""==keyword || undefined == keyword){
					Kit.ui.alert("请输入关键字");
				}else{
					window.location.href="${BASE_PATH}/goods/serchkey?keyword="+keyword;
				}
			}
			/* $('#int').bind('input propertychange', function() {  
				var keyword=$("#int").val();
				if(""==keyword || undefined == keyword){
					alert("请输入关键字");
				}else{
					window.location.href="${BASE_PATH}/goods/serchkey?keyword="+keyword;
				}
			}); */
		</script>
	</body>
</html>